import React from 'react'
import { StyleSheet, Text, TouchableHighlight, TouchableOpacity, TouchableWithoutFeedback, View } from 'react-native'

export default function TouchableOpacityDemo() {
  return (
    <View style={styles.root}>
      <TouchableOpacity
        style={styles.button}
        activeOpacity={0.5}// x ~ 1不透明度变化范围
        onPress={() => {
          console.log('onPress ...');
        }}
        onLongPress={() => {
          console.log('onLongPress ...');
        }}
        delayLongPress={1000}
        onPressIn={() => {
          console.log('onPressIn ...');
        }}
        onPressOut={() => {
          console.log('onPressOut ...');
        }}
      >
        <Text style={styles.txt}> click me </Text>
      </TouchableOpacity>

      <TouchableHighlight
        style={styles.button}
        activeOpacity={0.8}
        onPress={() => {
          console.log('onPress ...');
        }}
        underlayColor="#00bcd4" // 有触摸时的底色
      >
        <Text style={styles.txt}>按钮</Text>
      </TouchableHighlight>
      
      {/* 一般不会用 */}
      <TouchableWithoutFeedback>
        <View style={styles.button2}>
          <Text style={styles.txt}>按钮</Text>
        </View>
      </TouchableWithoutFeedback>


    </View>
  )
}

const styles = StyleSheet.create({
  root: {
    width: '100%',
    height: '100%',
    backgroundColor: '#F0F0F0',
    alignItems: 'center',
    justifyContent: 'center'
  },
  button: {
    width: 300,
    height: 65,
    backgroundColor: '#2fafef',
    justifyContent: 'center',
    alignItems: 'center',
    borderRadius: 8,
    marginBottom: 20
  },
  button2: {
    width: 300,
    height: 65,
    backgroundColor: 'red',
    justifyContent: 'center',
    alignItems: 'center',
  },
  txt: {
    fontSize: 20,
    color: 'white',
  },
});

